Vercel launches database storage service to help full-stack development

Vercel is a popular front-end application deployment platform for React.js, Next.js, etc. We can deploy applications on Github with one click, but it lacks an important part: the database. However, there are now four new databases to choose from.

Data is an indispensable part of Web applications. Before this, we could use Heroku's database service, but later Heroku charged and no longer provided free databases. The community has been looking for free trial database solutions. Now we can directly choose Vercel to launch a dynamic website, and it will be easier than ever to use JavaScript and TypeScript frameworks to render real-time data on the server.

On May 1, Vercel announced that a serverless storage solution is now available on Vercel, powered by some of the best infrastructure providers in the industry.

Vercel KV: A simple and durable serverless Redis solution, powered by Upstash
Vercel Postgres: A serverless SQL database built for the front end, powered by Neon
Vercel Blob: A file object storage solution for uploads at the edge, powered by Cloudflare R2

Vercel KV: A persistent Redis database

It is a key-value store (similar to Redis) based on Upstash E-Value. It is very easy to operate the database, and more importantly, it is very fast because unlike most databases, data is kept in memory rather than on disk, which means it can be used to persist state without losing data when the server crashes, that is, it will become extremely fast in terms of reading, and is ideal for caching data.

Usage example

title:test.js

import kv from '@vercel/kv'

export async function getPrefs() {
    const prefs = await kv.get('prefs')
    return prefs || {}
}

export async function updatePrefs(prefs: Record<string, string>) {
    return kv.set('prefs', prefs)
}

Price

Until June 1, 2023, you will not be charged for on-demand usage exceeding the basic limit.

Hobby free users are limited to 3000 requests per day and 256 MB of storage.
512 MB for Pro users - 1GB/$0.20 beyond When this limit is reached, requests to the database will be rate limited.

Vercel Postgres: Complex Data Made Simple

PostgreSQL is the preferred way for many developers to work with relational data. The benefits of this database are that it can automatically scale, is fault-tolerant, and has an easy-to-use UI interface. Basically you just need to click a button to add your database connection link to the environment, and then you can write raw SQL code directly in the React Server Component.

Example

import { sql } from '@vercel/postgres'
import { redirect } from 'next/navigation'

async function create(formData: FormData) {
    'use server'
    const { rows } = await sql`
    INSERT INTO products (name)
    VALUES (${formData.get('name')})
    `
    redirect(`/product/${rows[0].slug}`)
}

export default function Page() {
    return (
        <form action={create}>
            <input type="text" name="name" />
            <button type="submit">Submit</button>
        </form>
    )
}

We can use Vercel Postgres to query, insert, update, or delete data directly in React server components, render dynamic content on the server at static speed, and greatly reduce client JavaScript code

In addition, it also integrates with Keisely Well integrated with my personal favorite Prisma ORM library.

Pricing

Free users, 60 hours of compute time per month, 256 MB of storage.
Pro users, 100 hours of compute time per month, 512 MB of storage, 1GB/$0.30 beyond that. When you reach this limit, requests to the database will be rate limited.

Hobby is free to use by default, and Vercel will email you when you are close to your usage limit. You will not be charged for any additional usage, and we have the option to:

Expires after 30 days
Upgrade to Pro

Vercel Blob: File Object Storage

Vercel Blob is a fast, simple, and efficient solution for storing files in the cloud. It provides an easy and powerful storage API built entirely on web standards, without the need to configure buckets or implement heavy SDKs. Currently requires application.

Usage example

import { put } from '@vercel/blob'

export const runtime = 'edge'

export async function PUT(request: Request) {
    const { url } = await put('avatars/user-12345.png', request.body, { access: 'public' })

    return Response.json({ url })
}

It is based on Cloudflare R2 and allows you to store large amounts of unstructured data (such as images and PDF files) on the cloud. In other words, it can replace storage buckets such as S3. The SDK is very simple - just call the put method and pass in the file to upload and it returns the download URL. But there is a limitation at the moment: the maximum file upload size is 4MB, which should be increased after the beta phase.

Edge Config

It is a global data store that enables you to read data at the edge without querying an external database or accessing an upstream server. Most lookups return in less than 1ms, and 99% of reads will return in under 10ms.

Example usage

import { NextResponse, NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

export async function middleware(request: NextRequest) {
    if (await get('showNewDashboard')) {
        return NextResponse.rewrite(new URL('/new-dashboard', request.url))
    }
}

Use scenarios

Get data with ultra-low latency. For example, you should store feature flag switches in the Edge Config store
Store data that is frequently read but rarely changes. For example, you should store key redirect URLs in the Edge Config store
Read data in each region. Edge Config data is actively replicated to all regions in the Vercel edge network

Summary

I believe that as frameworks move from a monolithic architecture to a composable architecture, frameworks are shifting toward server-side rendering first. This shift is exemplified by React Server Component and streaming rendering. There is no shortage of backend and database options. But for new projects, the choice can still be overwhelming, and while Vercel may be more expensive than other service providers, it is undoubtedly the best choice for personal or full-stack experience projects.